<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>比较大小 watch的实现</title>
    <script src="../js/vue.js"></script>
</head>
<body>
    <div id="app">
        <h1>{{msg}}</h1>
        数值1:<input type="number" v-model="num1"><br>
        数值2:<input type="number" v-model="num2"><br>
        比较大小: {{compareResult}}
    </div>

    <script>
        const vm = new Vue ({
            el : '#app',
            data : {
                msg:'比较大小的案例',
                num1:0,
                num2:0,
                compareResult : ''
            },
            watch:{
                // 监视 num1
                num1:{
                    immediate:true,
                  /*   handler(newValue,oldValue){
                        console.log(newValue,oldValue)
                    } */
                    handler(val){
                        // console.log(val)
                        let result = val - this.num2
                        if(result == 0){
                            this.compareResult = val + '=' + this.num2
                        }else if(result > 0) {
                            this.compareResult = val + '>' + this.num2
                        }else{
                            this.compareResult = val + '<' + this.num2
                        }
                    }
                },

                // 监视num2
                num2:{
                    immediate:true,
                  /*   handler(newValue,oldValue){
                        console.log(newValue,oldValue)
                    } */
                    handler(val){
                        // console.log(val)
                        let result = this.num1 - val
                        if(result == 0){
                            this.compareResult = this.num1 + '=' + val
                        }else if(result > 0) {
                            this.compareResult = this.num1 + '>' + val
                        }else{
                            this.compareResult = this.num1 + '<' + val
                        }
                    }
                }

            }
        })
    </script>
</body>
</html>